<template>
  <div class="comments">
    <itHead>
      <span slot="left" class="iconfont iconjiantou2" @click="$router.back()"
        >返回</span
      >
      <span slot="center">精彩跟贴</span>
    </itHead>

    <!-- 评论列表 -->
    <div class="lists">
      <div :key="index" class="item" v-for="(item, index) in commentList">
        <div class="head">
          <img :src="item.user.head_img" alt />
          <div>
            <p>{{ item.user.nickname }}</p>
            <span>{{ item.create_date }}</span>
          </div>
          <span @click="showPL(item)">回复</span>
        </div>
        <!--  -->

        <itCommentItem :parent="item.parent"></itCommentItem>
        <!--  -->

        <div class="text">{{ item.content }}</div>
      </div>
    </div>
    <!-- 底部评论区域 -->
    <itCommentsFooter
      :type="type"
      :ReplyId="hf_ID"
      :textarea_ReplyUser_nickname="hf_nick"
      @reLoad="init"
      class="itCommentsFooter"
      @click_star="star"
      :star_active="post.has_star"
      :post="post"
    ></itCommentsFooter>
    <!-- 收藏弹出框 -->
    <van-dialog
      style="padding: 0 30px"
      v-model="star_show"
      title="还未登录,是否去登录?"
      show-cancel-button
      confirmButtonColor="red"
      confirmButtonText="去登录"
      @confirm="toLogin"
    >
    </van-dialog>
  </div>
</template>

<script>
// 自定义组件：头部
import itHead from "@/components/itHead.vue";
// 自定义apis： post_comment(评论列表), get_articleDetail(获取文章详情)
import { post_comment, get_articleDetail } from "@/apis/post.js";

// 用户aips： article_star(收藏文章)
import { article_star } from "@/apis/user.js";

// 导入moment时间格式框架
import moment from "moment";

// 自定义组件：评论块
import itCommentItem from "@/components/itCommentItem.vue";
// 自定义组件：评论组件
import itCommentsFooter from "@/components/itCommentsFooter.vue";

// 引入myAxios
import myaxios from "@/utils/myAxios.js";

import login from "@/views/login.vue";

export default {
  // 注册组件：
  components: {
    itHead,
    itCommentItem,
    itCommentsFooter,
    login,
  },
  //   数据：
  data() {
    return {
      post: { n: "n" }, //文章数据对象
      //post 一开始的{n: 'n'} 是没有任何意义的, 仅仅是为了让它一开始不是一个空的对象

      star_show: false, //收藏按钮弹出框
      commentList: [],

      // 控制底部评论区域显示
      type: 1,
      // 回复ID
      hf_ID: null,
      hf_nick: null,
    };
  },
  //   方法：
  methods: {
    // 去登录
    toLogin() {
      this.$router.push({ path: "/login" });
    },

    // 功能：收藏/取消
    async star() {
      // 先看看用户是否登录
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));

      // 如果获取不到用户信息, 那就弹出询问用户是否登录的框框,恶心他
      if (!userInfo) {
        this.star_show = true;
      } else {
        let res = await article_star(this.post.id);
        console.log(res);
        if (res.status == 200 && res.data.message == "收藏成功") {
          this.post.has_star = true;
          this.$toast.success(res.data.message);
        } else if (res.status == 200 && res.data.message == "取消成功") {
          this.post.has_star = false;
          this.$toast.success(res.data.message);
        }
      }
    },
    // 初始化
    async init() {
      // 获取文章详情：
      let res = await get_articleDetail(this.$route.params.id);
      if (res.status == 200) {
        this.post = res.data.data;
        // 改造数据的时间格式：
        this.post.user.create_date = moment(this.post.user.create_date).format(
          "YYYY-MM-DD"
        );
        if (this.post.type == 2) {
          this.post.content = myaxios.defaults.baseURL + this.post.content;
        }
        // 改造作者图片路径
        this.post.user.head_img =
          myaxios.defaults.baseURL + this.post.user.head_img;
        // console.log(this.post);
      }

      // 获取评论列表
      let res_comment = await post_comment(this.post.id);
      console.log(res_comment);
      if (res_comment.status == 200) {
        // 将评论列表结果赋给this.commentList
        this.commentList = res_comment.data.data;
        // 利用moment框架 改造评论中的时间格式
        this.commentList.map((item) => {
          item.create_date = moment(item.create_date).fromNow();
          item.user.head_img = myaxios.defaults.baseURL + item.user.head_img;
        });
      }
      console.log(this.post);
    },

    showPL(user) {
      this.type = 2;
      this.hf_ID = user.id;
      this.hf_nick = user.user.nickname;
    },
  },
  //   钩子：
  async mounted() {
    this.init();
  },
};
</script>

<style lang='less' scoped>
.comments {
  padding-bottom: 50 * 100vh / 750;
}
.lists {
  background-color: rgba(242, 242, 242, 0.534);
  border-top: 5px solid #ddd;
  padding: 0 15px;
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > img {
        width: 50/360 * 100vw;
        height: 50/360 * 100vw;
        display: block;
        border-radius: 50%;
      }
      > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        > span {
          font-size: 12px;
          color: #999;
          line-height: 25px;
        }
      }
      > span {
        color: #999;
        font-size: 13px;
      }
    }
    .text {
      font-size: 14px;
      color: #333;
      padding: 20px 0 10px 0;
    }
  }
}
.itCommentsFooter {
  position: fixed;
  bottom: 0;
  width: 100vw;
}
</style>